<template>
  <t-link
    v-permission="['system:zheng-contract-pay:update']"
    theme="primary"
    @click="handleOpenDialog('update', { id: props.id })"
  >
    编辑支付状态
  </t-link>

  <!-- 自定义对话框 -->
  <custom-dialog
    ref="customDialogRef"
    v-slot="{ formData }"
    :api-map="payContractZhengCRUD"
    header="编辑支付状态"
    @request-success="handleDialogRequestSuccess"
  >
    <t-form-item label="支付状态" name="payStatus" :rules="[{ required: true, message: '请选择支付状态' }]">
      <t-select 
        v-model:value="formData.payStatus" 
        :options="dictionaryStore.get('pay_status')" 
        clearable
        filterable 
        placeholder="" />
    </t-form-item>
  </custom-dialog>
</template>

<script setup lang="ts">
import { useTemplateRef } from 'vue';
import { payContractZhengCRUD } from '@/api/finance/pay';
import CustomDialog from '@/components/custom/dialog/index.vue';
import { useDictionaryStore } from '@/store';
// 字典仓库
const dictionaryStore = useDictionaryStore();
// props
const props = defineProps({
  // 期款id
  id: {
    type: Number,
    required: true,
  },
});
// emits
const emits = defineEmits(['requestSuccess']);

// 自定义对话框ref
const customDialogRef = useTemplateRef('customDialogRef');
// 处理打开对话框
const handleOpenDialog = (mode: 'create' | 'read' | 'update', params: Record<string, any>) => {
  customDialogRef.value.open(mode, params);
};
// 处理对话框请求成功
const handleDialogRequestSuccess = (result: Record<string, any>) => {
  emits('requestSuccess', result);
};
</script>
